<template>
  <!--   卡片视图区域 -->
  <el-card class="box-card" style="position: relative;">
    <div class="button-group">
      <!-- 搜索与添加区域 -->
      <el-input style="width: 200px" placeholder="产品名" v-model="formInput.name"></el-input>
      &nbsp;&nbsp;
      <el-input style="width: 200px" placeholder="类型" v-model="formInput.type"></el-input>
      &nbsp;&nbsp;
      <el-input style="width: 200px" placeholder="价格" v-model="formInput.price"></el-input>
      &nbsp;&nbsp;
      <el-button type="primary" @click="gotoSearch">查询</el-button>
      &nbsp;&nbsp;
      <el-button type="success" @click="exportData">导出数据</el-button>
    </div>
    <el-table style="width: 100%;"
              :data="allData"
              @selection-change="handleSelectionChange"
              :empty-text="' '"
              height="500px"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="产品名" :resizable="true" prop="name" ></el-table-column>
      <el-table-column label="类型" :resizable="true" prop="type"></el-table-column>
      <el-table-column label="图片" :resizable="true">
        <template v-slot:default="{ row }">
          <img :src="row.image" alt="图片" style="width: 100px; height: auto;  max-height: 80px; " >
        </template>
      </el-table-column>
      <el-table-column label="价格(元)/斤" :resizable="true" prop="price"></el-table-column>
      <el-table-column label="描述" :resizable="true" prop="description" calss="price"></el-table-column>
      <el-table-column label="操作">
        <template v-slot:default="{ row }" >
          <el-button  link type="danger" @click="handleEdit(row)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot:default="{ row }">
          <el-icon size="20" @click="handleAddFirst(row)" class="shoppingCart" ><ShoppingCart /></el-icon>
        </template>
      </el-table-column>
    </el-table>

    <!--    点击编辑打开的对话框-->
    <el-dialog
        v-model="dialogEditFormVisible"
        title="商品详情信息"
        width="50%"
        align-center
        :before-close="EditClose"
    >
      <el-form :model="rowData"  >
        <el-form-item  label="姓名" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="name">
          <el-input  v-model="rowData.name" autocomplete="off" :readonly="true"/>
        </el-form-item>
        <el-form-item  label="类别" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="name">
        <el-input  v-model="rowData.type" autocomplete="off" :readonly="true"/>
      </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="description"  >
          <el-input  v-model="rowData.description" autocomplete="off" :readonly="true"/>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="price"  >
          <el-input  v-model="rowData.price" autocomplete="off" :readonly="true"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" :style="{ width: inputWidth }" >
          <el-image v-if="rowData.image" :src="rowData.image" fit="contain" style="max-width: 250px; max-height: 350px;" ></el-image>
        </el-form-item>
      </el-form>
      <template #footer>
      </template>
    </el-dialog>
    <el-dialog
        v-model="dialogFormVisible"
        title="选择商品数量"
        width="50%"
        align-center
        :before-close="EditClose"
    >
      <el-form :model="ADDData"  >
        <el-form-item  label="姓名" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="name">
          <el-input  v-model="ADDData.name" autocomplete="off" :readonly="true"/>
        </el-form-item>
        <el-form-item  label="类别" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="name">
          <el-input  v-model="ADDData.type" autocomplete="off" :readonly="true"/>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="description"  >
          <el-input  v-model="ADDData.description" autocomplete="off" :readonly="true"/>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth" :style="{ width: inputWidth }" prop="price"  >
          <el-input  v-model="ADDData.price" autocomplete="off" :readonly="true"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" :style="{ width: inputWidth }" >
          <el-image v-if="ADDData.image" :src="ADDData.image" fit="contain" style="max-width: 250px; max-height: 350px;" ></el-image>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth" :style="{ width: numberWidth }" prop="number"  >
          <el-input  v-model="ADDData.number" autocomplete="off" />
        </el-form-item>
        <div style="margin-left: 50px">
          <span>
            <el-button type="primary" @click="submitThings">确定添加到购物车</el-button>
          </span>
        </div>
      </el-form>
      <template #footer>
      </template>
    </el-dialog>
    <!--    如果表格没有填写的话-->
    <el-dialog
        v-model="formDialogVisible"
        title="Warning"
        width="30%"
        align-center
    >
      <span>请上填写表格信息</span>
      <template #footer>
      <span class="dialog-footer">
      </span>
      </template>
    </el-dialog>
    <div class="page" style="position: absolute; bottom: 10px; width: 100%;">
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[1,2,6,10,30]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </el-card>
  <!--  卡片新增用户的地方-->
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import adminApi from "../../apis/admin.js";
import userApi from "../../apis/user.js"
import {ElMessage, ElMessageBox, FormInstance, FormRules} from 'element-plus'
import {CirclePlusFilled, Plus} from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
onMounted(()=>{
  getAllProductData();
})
//定义或取所有的数据并且展示和分页查询
const pagination=ref({
  currentPage:1,
  pageSize:5,
  total:0
})
const formInput =ref({
  name:'',
  type:'',
  price:'',
})
const dataObject =ref();
const allData = ref([]);
const getAllProductData = () => {
  const params = {
    name: formInput.value.name,
    type: formInput.value.type,
    price: formInput.value.price,
    pageNo: pagination.value.currentPage,
    pageSize: pagination.value.pageSize,
  };

  adminApi.getAllProductData(params)
      .then(res => {
        dataObject.value = res;
        console.log(dataObject);
        console.log(dataObject.value.data);
        console.log(dataObject.value.status);
        pagination.value.total = dataObject.value.status;
        // allData.value=
        allData.value=dataObject.value.data;
      })
      .catch(error => {
        console.error(error);
      });

  console.log('调用完成');
  console.log('alldata', allData);
};
const handleSizeChange = (val: number) => {
  console.log(`${val}`)
  pagination.value.pageSize=val;
  getAllProductData();
}
const handleCurrentChange = (val: number) => {
  pagination.value.currentPage=val;
  getAllProductData();
}

//绑定选择的标号
const multipleSelection = ref<ProductId[]>([])
const ids = ref([])
//定义那个批量删除要绑定的数据
interface ProductId {
  id: number;
}
const handleSelectionChange = (val: any[]) => {
  console.log(val)
  multipleSelection.value = val
  console.log(multipleSelection.value);
  const selectedIds = val.map(row => row.id);
  ids.value=selectedIds;
  console.log(selectedIds);
  console.log("ids is",ids);
  console.log(ids.value);
}
//修改信息
const rowData = ref({
  id:'',
  name: '',
  type:'',
  image:'',
  price:'',
  description:'',
})
//控制编辑的对话框是否打开
const dialogEditFormVisible = ref(false)
const dialogFormVisible = ref(false)
const ADDData = ref({
  id:'',
  name: '',
  type:'',
  image:'',
  price:'',
  description:'',
  number:'0',
})
const handleEdit = (row) => {
  console.log(row);
  console.log(row.number)
  dialogEditFormVisible.value=true
  adminApi.getProBYId(row.id).then(res=>{
    console.log(row.id);
    console.log(res.data)
    rowData.value.name=res.data.name;
    rowData.value.type=res.data.type;
    rowData.value.image=res.data.image;
    rowData.value.price=res.data.price;
    rowData.value.description=res.data.description;
    rowData.value.id=row.id;
  })
  // 编辑操作的逻辑
};
const formDialogVisible = ref(false)
//新增表格时候的那个输入框的长度
const formLabelWidth=ref('70px')
//定义新增功能的弹窗
//定义产品的相应数据
const  inputWidth= ref('400px');
const  numberWidth= ref('200px');
const form = ref({
  name: '',
  image:'',
  type:'',
  description:'',
  price:'',
})
//定义上传那个信息校验的规则


const EditClose = (done: () => void) => {
  ElMessageBox.confirm('确认退出？')
      .then(() => {
        done(); // 关闭对话框
        ADDData.value.number='0';
      })
      .catch(() => {
        // 用户取消关闭
      });
};
const gotoSearch = () => {
  const params = {
    name: formInput.value.name,
    type:formInput.value.type,
    price:formInput.value.price,
    pageNo: pagination.value.currentPage,
    pageSize: pagination.value.pageSize,
  };
  console.log(params.pageSize);
  console.log(params.pageSize);
  adminApi.getAllProductData(params).then(res=>{
    const dataObject = res;
    console.log(dataObject)
    console.log(dataObject.data)
    console.log(dataObject.status)
    allData.value=dataObject.data
    pagination.value.total=dataObject.status
  })
}
//定义导出数据的方法
const exportData = () => {
  var link = document.createElement("a");
  link.href = "http://8.137.113.138:88/excel/exportProduct";
  link.click();
};
const submitThings = () => {
  userApi.IsUserDetailExist().then(res=>{
    console.log(res);
    console.log(res.status);
    if (res.status==true){
      userApi.InsertProduct(ADDData.value).then(res=>{
        console.log(res);
        console.log(res.status)
        if(res.status=="lessZero"){
          ElMessage.warning({
            message: '购物数量不得为负数',
            duration: 1500, // 设置显示时间为 1.5 秒
          });
        }
        else if(res.status=="zero"){
          ElMessage.warning({
            message: '请选择购物数量',
            duration: 1500, // 设置显示时间为 1.5 秒
          });
        }
        else if(res.status=="false"){
          ElMessage.warning({
            message: '请勿重复选择,若要修改数量请到购物车中',
            duration: 1500, // 设置显示时间为 1.5 秒
          });
        }
        else{
          ElMessage.success({
            message: '添加到购物车成功',
            duration: 1500, // 设置显示时间为 1.5 秒
          });
        }
      })
    }
    else{
      ElMessage.error({
        message: '请在个人信息管理当中设置个人的信息',
        duration: 1500, // 设置显示时间为 1.5 秒
      });
    }
  })

}
const handleAddFirst = (row) => {
  dialogFormVisible.value=true
  adminApi.getProBYId(row.id).then(res=>{
    ADDData.value.name=res.data.name;
    ADDData.value.type=res.data.type;
    ADDData.value.image=res.data.image;
    ADDData.value.price=res.data.price;
    ADDData.value.description=res.data.description;
    ADDData.value.id=row.id;
    console.log(ADDData.value);
    console.log(ADDData)
  })
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.box-card {
  height: 598px;
}
.button-group{
  display: flex;
  align-items: center;
}
.page {
  margin-top: auto;
}
.shoppingCart{
  cursor: pointer;
}
.product-number{
  font-size: 18px;
  font-weight: lighter;
  margin-bottom: 10px;
}
.shoppingAdd{
  margin-left: 10px;
  cursor: pointer;
}
.shoppingDelete{
  margin-right: 10px;
  cursor: pointer;
}
/deep/::-webkit-scrollbar{
  display:block!important;
  height:6px;
  width:6px;
  background-color:#ddd;
}
</style>

